<template>
    <sky-base-page ref="skyBasePageRef" :api-obj="qly.api.user.information_comment.index" type="list"
                   :params="{information_id:qly.page.params.id}" btnPadding="0"
                   refresherEnabled bg-page-color="#f5f5f5" @success="success">
        <template #default="{dataList}">
            <sky-dynamic :item="dynamicInfo" :disabled="true" @success="getDynamicInfo" @operation="operation"/>
            <view class="comment-num-box">
                <view class="comment-num">共{{ total }}条评论</view>
            </view>
            <dynamic-comment v-for="(item,index) in dataList" :key="index" :item="item"/>
            <sky-empty v-if="dataList.length<=0" height="600rpx" text="暂无评论数据"/>
        </template>
        <template #footer>
            <view class="footer-box">
                <up-search placeholder="说点什么..." search-icon="" v-model="content" action-text="发送" @custom="send"
                           @search="send"></up-search>
            </view>
        </template>
    </sky-base-page>
    
    <!--    操作弹窗-->
    <sky-operation ref="operationPopupRef" @success="deleteSuccess"/>
</template>
<script setup>
import dynamicComment from './components/dynamicComment.vue'

const dynamicInfo = ref({})
const content = ref('')
const skyBasePageRef = ref()
const operationPopupRef = ref()
const total = ref(0)
// 获取动态详情
const getDynamicInfo = async () => {
    const res = await qly.api.user.information.info({id: qly.page.params.id})
    if (res.code === 1) {
        dynamicInfo.value = res.data
    } else {
        qly.dialog.apiError(res).catch()
    }
}

// 动态阅读数量
const readHandler = async () => {
    const res = await qly.api.user.information.read({id: qly.page.params.id})
    if (res.code === 1) {
    }
}

const send = async () => {
    if (!content.value) {
        qly.dialog.error('请输入内容').catch()
        return
    }
    const res = await qly.api.user.information_comment.add({
        information_id: qly.page.params.id,
        content: content.value
    })
    if (res.code === 1) {
        console.log('评论成功了')
        qly.dialog.success('评论成功').catch()
        content.value = ''
        skyBasePageRef.value.refresh()
    } else {
        qly.dialog.apiError(res).catch()
    }
}

const success = (e) => {
    total.value = e.total
}
const operation = (e) => {
    operationPopupRef.value.open(e)
}

// 删除成功
const deleteSuccess = () => {
    uni.navigateBack()
    uni.$emit('reload')
}
qly.page.onLoad(() => {
    getDynamicInfo() // 获取动态详情
    readHandler()
})
</script>
<style scoped lang="scss">
.comment-num-box {
    background-color: #fff;
    margin-top: 12rpx;
    padding: 0 24rpx;
    
    .comment-num {
        padding: 24rpx 0;
        border-bottom: 2rpx solid #f5f5f5;
    }
}

.footer-box {
    padding: 12rpx 32rpx;
    background-color: #fff;
    border-top: 2rpx solid #f5f5f5;
}
</style>
